<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Markdown 展示示例</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .markdown-content {
        max-width: 800px;
        margin: 0 auto;
        line-height: 1.6;
      }
      .markdown-content h1 {
        color: #003366;
        margin: 20px 0 10px 0;
      }
      .markdown-content p {
        margin: 10px 0;
      }
      .markdown-content code {
        background-color: #f6f8fa;
        padding: 2px 4px;
        border-radius: 3px;
        font-family: Consolas, monospace;
      }
      .markdown-content pre {
        background-color: #f6f8fa;
        padding: 10px;
        border-radius: 6px;
        overflow-x: auto;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  </head>
  <body>
    <div class="markdown-content" id="output"></div>

    <script>
      // Markdown 格式的内容
      const markdownText = `
            当然！下面是中国四大名著（四大名著）的名称：\n\n1. 《水浒传》（Shui Hu Zhuan）- 这部作品是一部传统中国大说，由罗贯 middle century 的罗氏家族成员罗元中 (Luo Guanzhong) 编写。它描述了一个名叫 water margin (水浒岭) 的地方，其中许多英雄在此地绞尽脑汁，为皇帝服务并保护自己的家乡。\n2. 《梦溪流》（Meng Xi Bi Lu）- 这部作品是一部小说，由唐朝中国著名诗人孟子颐 (Meng Jiangnu) 写成。它讲述了孟子颐的故事，她因为救了一只被狼吞噬的小兔来到了仙境中。\n3. 《西游记》（Xi You Ji）- 这部作品是一部传统中国大说，由宋代的诗人吴承恩 (Wu Cheng'en) 编写。它讲述了琼楼玉宇 (Jade Tower, Jade Bamboo) 和他的侍者孙悟空 (Monkey King) 的冒险，他们为求仙以争与佛法大师达赖和妖怪所抢走的圣书还回来。\n4. 《红楼梦》（Hong Lou Meng）- 这部作品是一部传统中国大说，由清代的诗人曹雪莎 (Cao Xueqin) 写成。它描述了一个名叫红楼 (Red Mansion) 的地方和其中的居民的生活，以及他们的爱情、忧伤和妄想。

              `;

      // 将 Markdown 转换为 HTML
      const htmlContent = marked.parse(markdownText);

      // 将 HTML 插入页面
      document.getElementById("output").innerHTML = htmlContent;
    </script>
  </body>
</html>
